import QtQuick 2.15
import QtQuick.Controls
import QtQuick.Controls.Basic
import "../components"
import "../Utils.js" as Utils

Item {
    anchors.fill: parent
    property var collectList: playContent.collectPlayerList
    property var theme: p_theme.currentTheme()
    property double fontSize: 9

    onCollectListChanged: {
        pageCoollectListModel.resetData();
    }
    Rectangle {
        id: listHeader
        width: parent.width - 20
        height: 40
        color: "#f6f6f6"
        Row {
            height: parent.height
            width: parent.width - 20
            anchors.horizontalCenter: parent.horizontalCenter
            opacity: 0.8
            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: parent.width * 0.2 - 80
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                font.italic: true
                font.bold: true
                text: "#"
            }
            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: 80
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                text: "封面"
            }
            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: parent.width * 0.25
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                elide: Text.ElideRight
                text: "歌曲名称"
            }

            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: parent.width * 0.3
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
                text: "作曲家"
            }
            Text {
                color: theme.fontColor
                font.pointSize: fontSize
                width: parent.width * 0.25 - 80
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                elide: Text.ElideRight
                text: "时长"
            }
        }
    }
    Item {
        y: 40
        width: parent.width - 20
        height: parent.height - 40
        clip: true
        ListView {
            id: pageCoollectListView
            anchors.fill: parent
            ScrollBar.vertical: CScrollBar {}
            model: ListModel {
                id: pageCoollectListModel
                Component.onCompleted: {
                    resetData();
                }
                function resetData() {
                    if (count === 0) {
                        append(collectList);
                        return;
                    }
                    const ids = [];
                    for (let i = 0; i < count; i++) {
                        ids.push(get(i).id);
                    }
                    const nids = collectList.map(item => item.id);
                    const tids = ids.filter(value => nids.indexOf(value) !== -1);
                    const rIds = ids.filter(v => tids.indexOf(v) === -1);
                    const aIds = nids.filter(v => tids.indexOf(v) === -1);
                    if (aIds.length !== 0) {
                        insert(0, collectList.filter(v => aIds.indexOf(v.id) !== -1));
                    }
                    if (rIds.length !== 0) {
                        for (let j = 0; j < count; j++) {
                            if (rIds.indexOf(get(j).id) !== -1) {
                                remove(j);
                            }
                        }
                    }
                }
            }

            delegate: MusicRow {
                id: wrapper
                parentWidth: pageCoollectListView.width
                index: model.index
                playList: collectList
                playInfo: Utils.modelToJsObj(model, ["id", "name", 'artists', 'coverImage', 'allTime', 'vip'])
                ListView.onAdd: addAnimation.start()
                ListView.onRemove: delAnimation.start()
                SequentialAnimation {
                    id: delAnimation
                    PropertyAction {
                        target: wrapper
                        property: "ListView.delayRemove"
                        value: true
                    }
                    NumberAnimation {
                        target: wrapper
                        property: "opacity"
                        duration: 400
                        easing.type: Easing.InOutQuad
                        from: 1
                        to: 0
                    }
                    PropertyAction {
                        target: wrapper
                        property: "ListView.delayRemove"
                        value: false
                    }
                }
                NumberAnimation {
                    id: addAnimation
                    target: wrapper
                    property: "opacity"
                    duration: 400
                    easing.type: Easing.InOutQuad
                    from: 0.2
                    to: 1
                }
            }
        }
    }
}
